<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="18css.css" rel="stylesheet" type="text/css">
</head>
<body>
    <!--顶部-->
    <div class="top">
        <div class="logo">Logo</div>
        <div class="nav">
            <ul>
                <li><a href="#home">主页</a></li>
                <li><a href="#news">新闻</a></li>
                <li><a href="#contact">联系</a></li>
                <li><a href="#about">关于</a></li>
            </ul>
        </div>
        <div class="avatar">
            <img src="多啦.png">
        </div>

        <div class="search">
            <form action="" method="post">
                <input type="text" placeholder="搜索">
            </form>
        </div>


    </div>
    <!--中部-->

     <div class="middle">
        <div class="content1">
            <h5>享受生活</h5>
            <p>好好学习</p>
            <hr>
        </div>
        <div class="content2">
           <div class="img">
               <img src="多啦.png">
               <div class="desc">图片描述</div>
           </div>
            <div class="img">
               <img src="多啦.png">
               <div class="desc">图片描述</div>
           </div>
            <div class="img">
               <img src="多啦.png">
               <div class="desc">图片描述</div>
           </div>
            <div class="img">
               <img src="多啦.png">
               <div class="desc">图片描述</div>
           </div>

        </div>
    </div>


    <div>
    <form action="">
        <label>用户名:</label><input type="text" placeholder="请输入用户名" required="true"><br>
        <label>密码</label><input type="password"><br>

        <input type="reset" value="重置">
        <input type="submit" value="确认提交">
    </form>
    </div>




    <!--<div class="middle">-->
        <!--<div class="content1">-->
            <!--&lt;!&ndash;<img src="多啦.png">&ndash;&gt;-->
            <!--&lt;!&ndash;<img src="多啦.png">&ndash;&gt;-->
            <!--<h5>享受生活</h5>-->
            <!--<p>好好学习</p>-->
            <!--<p>将来的你一定会感激现在拼命的自己</p>-->
            <!--<hr>-->
            <!--<hr>-->
        <!--</div>-->
        <!--<div class="content2">-->
            <!--<img src="多啦.png">-->
            <!--<img src="多啦.png">-->
            <!--<img src="多啦.png">-->
            <!--<img src="多啦.png">-->

        <!--</div>-->
    <!--</div>-->
    <!--底部-->
    <div class="bottom">
        联系我们
        <hr>
        &copy;&nbsp;特殊符号
    </div>



</body>
</html>